<template>
  <div id="SelectDataList">
    <vxe-pulldown ref="pulldownRef" transfer>
      <template #default>
        <vxe-input ref="SelectInpiut" v-model="inputValue" suffix-icon="vxe-icon-table" :placeholder="props.placeholder" @suffix-click="suffixClick" @focus="focusEvent" @change="findDataList" @blur="blurEvent"></vxe-input>
      </template>

      <template #dropdown>
        <div class="my-bodydown4" :style="{ width: width, height: height }">
          <vxe-grid border :ref="'gridTable4'" :auto-resize="true" height="auto" width="auto" :row-config="{ isHover: true, isCurrent: true }" :loading="sLoading" :data="dataList" :columns="column" :pager-config="isPage ? tablePage : null" :edit-config="{ mode: 'row' }" :keyboard-config="{ isArrow: true, isEnter: true, isTab: true, isEsc: true }" :column-config="{ resizable: false }" @cell-click="cellClickEvent" @page-change="pageChangeEvent" @keydown="keydownHandler">
          </vxe-grid>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { pageSizes, IsEmpty } from '../utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
defineExpose({
  findDataList
});

let props = defineProps({
  url: String, //请求地址
  column: Array as () => String[], //动态列和字段名
  searchParam: {}, //接口参数{key1:value1,key2:value2...}
  isPage: { type: Boolean, default: false }, //是否需要分页
  width: { type: String, default: '590px' }, //表格宽度
  height: { type: String, default: '300px' }, //表格高度
  inputKeyName: String, //查询入参名称
  placeholder: { type: String, default: '点击选择' }, //弹框标题
  showField: { type: String, default: 'name' } //点击确定按钮后 输入框展示选中行的哪一个字段
}) as any;
let inputValue = ref(null);
let sLoading = ref(false);
let { proxy }: any = getCurrentInstance();
let dataList = reactive([]);
let tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: pageSizes[0]
});
function findDataList() {
  //
  dataList.length = 0;
  sLoading.value = true;
  // 请求参数
  let params: any = {
    pageSize: tablePage.pageSize,
    pageIndex: tablePage.currentPage
  };

  // 循环父组件传来的参数，添加到参数对象中(data，params)
  if (!IsEmpty(props.searchParam)) {
    for (const key in props.searchParam) {
      if (props.searchParam[key]) {
        params[key] = props.searchParam[key];
      }
    }
  }

  if (!IsEmpty(props.inputKeyName)) {
    params[props.inputKeyName] = inputValue.value;
  }
  proxy.$http
    .get(props.url, { params })
    .then((res: any) => {
      sLoading.value = false;
      if (res.status.code !== 1 && res.status.code !== 200) {
        VxeMessage('获取列表失败', VxeNotifyType.error);
      } else {
        dataList.length = 0;
        if (props.isPage) {
          dataList.push(...res.data.records);
          tablePage.total = res.data.total;
        } else {
          dataList.push(...res.data);
        }
        let $Xtable = proxy.$refs.gridTable4;
        $Xtable.setCurrentRow(dataList[0]);
        $Xtable.focus();
      }
    })
    .catch((err) => {
      sLoading.value = false;
      VxeMessage('获取列表失败', VxeNotifyType.error);
    });
}
//装饰器中的参数是方法名，用来传递给父组件
function handleClickRow({ row }) {
  proxy.$emit('selectDataRow', row);
}

// 输入框获取焦点
let pulldownRef = ref();
let SelectInpiut = ref();
function focusEvent() {
  const $pulldown = pulldownRef.value;
  if ($pulldown) {
    $pulldown.showPanel();
  }
  findDataList();
}

// 输入框点击
function suffixClick() {
  const $pulldown = pulldownRef.value;
  if ($pulldown) {
    $pulldown.togglePanel();
  }
}

// 点击表格当前行
function cellClickEvent({ row, rowIndex }) {
  proxy.$emit('SelectCellClick', row);
  const $pulldown = pulldownRef.value;
  if ($pulldown) {
    $pulldown.togglePanel();
  }
  inputValue.value = row[props.showField];
}

// 表格回车事件
function keydownHandler(row) {
  if (row.$event.code === 'Enter') {
    const clickRow = proxy.$refs.gridTable4.getCurrentRecord();
    proxy.$emit('SelectCellClick', clickRow);

    const $pulldown = pulldownRef.value;
    if ($pulldown) {
      $pulldown.togglePanel();
    }
    inputValue.value = clickRow.name;
  }
}

// 输入框失去焦点
function blurEvent() {
  const $pulldown = pulldownRef.value;
  if ($pulldown) {
    $pulldown.showPanel();
  }
}

// 页数变更
function pageChangeEvent({ type, currentPage, pageSize }) {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  findDataList();
}
</script>
<style lang="scss" scoped>
#SelectDataList {
  :deep(.vxe-table--render-default .vxe-cel) {
    line-height: 19px !important;
  }
}
</style>
